import React, { useEffect, useState } from 'react';
import DescriptionsCondition from '@/components/DescriptionsCondition';
import DrawerCondition from '@/components/DrawerCondition';
import PopImgShow from '@/components/PopImgShow';
import { ShowTime } from '@/common/contact';
import { Timeline, Row, Col, Space } from 'antd';
const Details = (props) => {
  const { dispatch, visible = {}, onClose, handleCallback, loading } = props;
  const { detail = {}, show } = visible;
  const [data, setData] = useState({})
  useEffect(() => {
    if (!show) {
      setData({})
    }
    else {
      const { expressRecord = '{}' } = detail

      setData(JSON.parse(expressRecord))
    }
  }, [show])
  const { list = [], expName, number, logo, courierPhone } = data

  const modalProps = {
    title: `物流详情`,
    visible: show,
    onClose,
  };
  return (
    <DrawerCondition {...modalProps}>
      <Row gutter={[24, 24]}>

        <Col style={{ display: 'flex', justifyContent: 'space-between' }} span={24}>
          <Space>
            <PopImgShow url={logo}></PopImgShow>
            <div>
              <div>{expName}</div>
              <div>{number}</div>
            </div>

          </Space>
          <div>联系电话：{courierPhone}</div>
        </Col>
        <Col span={24}>
          <Timeline>
            {list.map((val, index) => {
              const { status, time } = val
              return <Timeline.Item key={index}>
                <div>
                  {status}
                </div>
                <div>
                  {time}
                </div>
              </Timeline.Item>
            })}
            {/* <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
            <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
            <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
            <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item> */}
          </Timeline>
        </Col>
      </Row>
    </DrawerCondition>
  );
};
export default Details;
